<template>
  <div>
    <div v-if="pageBool">
      <div style="width: 100%">
        <!-- 搜索条件 -->
        <div class="grid_3_column">
          <!-- 客户姓名 -->
          <div class="flex_y_center">
            客户姓名：
            <el-input
              v-model="searchForm.name"
              placeholder="请输入客户姓名"
              style="width: 60%"
            />
          </div>
          <!-- 所属客服 -->
          <div class="flex_y_center">
            所属客服：
            <el-select
              v-model="searchForm.service"
              clearable
              placeholder="请选择所属的客服"
              style="width: 60%"
            >
              <el-option
                v-for="(item, index) of serviceList"
                :key="index"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </div>
          <!-- 开始时间 -->
          <div class="flex_y_center">
            开始时间：
            <el-date-picker
              v-model="searchForm.start_at"
              placeholder="请选择开始日期"
              style="width: 60%"
              type="date"
            />
          </div>
          <!-- 结束时间 -->
          <div class="flex_y_center">
            结束时间：
            <el-date-picker
              v-model="searchForm.end_at"
              placeholder="请选择结束日期"
              style="width: 60%"
              type="date"
            />
          </div>
        </div>
        <!-- 筛选，导出按钮 -->
        <div style="margin-top: 10px">
          <el-button
            :loading="searchBtn"
            type="primary"
            @click="getCusList('searchBtn')"
          >
            筛选
          </el-button>
          <el-button :loading="resetBtn" @click="resetForm">重置</el-button>
        </div>
      </div>
      <!-- 客服客户展示列表 -->
      <el-table
        :data="cusList"
        :empty-text="emptyText"
        style="margin-top: 10px"
      >
        <el-table-column label="客户名称" prop="cus_name" />
        <el-table-column label="接待时间" prop="start_at" />
        <el-table-column label="结束时间" prop="end_at" />
        <el-table-column label="是否接待" prop="whether_recep" />
        <el-table-column label="接待状态" prop="recep_status" />
        <el-table-column align="left" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="checkChat(scope.row)">
              聊天记录
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Chat-log-info v-else @send="back" />
  </div>
</template>

<script>
  export default {
    components: {
      ChatLogInfo: () => import('./components/chatloginfo.vue'),
    },
    data() {
      return {
        pageBool: true,
        searchBtn: false, // 筛选按钮加载样式显示隐藏
        resetBtn: false, // 导出按钮加载样式显示隐藏
        serviceList: [{ name: '无数据', value: '无数据' }],
        searchForm: {
          name: '', // 客户姓名
          service: '', // 所属客服
        },

        emptyText: ' ',
        cusList: [], // 存放获取的与客服沟通的客户列表
      }
    },
    mounted() {
      this.getCusList()
      this.cusList.push({
        cus_name: '张三',
        start_at: '2022-3-16',
        end_at: '2022-3-16',
        whether_recep: '已接待',
        recep_status: '已结束',
      })
    },
    methods: {
      // 获取
      getCusList(e) {
        this[e] = true
        const loading = this.$loading({
          lock: true,
          target:
            this.cusList.length == 0
              ? '.el-table__empty-block'
              : '.el-table__body',
        })

        setTimeout(() => {
          loading.close()
          this[e] = false
        }, 3000)
      },
      // 重置筛选条件
      resetForm() {
        for (let item in this.searchForm) {
          this.searchForm[item] = ''
        }
        this.getCusList('resetBtn')
      },
      // 查看聊天详情
      checkChat() {
        this.pageBool = false
      },

      back() {
        this.pageBool = true
        this.$nextTick(() => {
          this.getCusList()
        })
      },
    },
  }
</script>

<style scoped>
  .grid_3_column {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
  }
</style>
